<!--
 * @Description: 插件服务列表
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-04-09 17:25:00
 * @LastEditors: 黄勇
 -->
<template>
    <div class="plugin">
        <div class="main-toolbar">
            <el-button
                type="primary"
                @click="showPluginAdd"
            >
                <app-icon iconName="vcloud-btn-add"></app-icon>
                新建
            </el-button>
            <el-button
                type="plain"
                @click="showPluginModify"
            >
                <app-icon iconName="vcloud-bianji"></app-icon>
                修改
            </el-button>
            <el-button
                type="plain"
                @click="deleteConfirm"
            >
                <app-icon iconName="vcloud-shanchu"></app-icon>
                删除
            </el-button>

            <!-- <el-button
                plain
                @click="showCategory"
            >
                <app-icon iconName="vcloud-switch"></app-icon>
                服务分类配置
            </el-button> -->
        </div>
        <div class="main-content table-pagination">
            <el-table
                ref="singleCheck"
                :data="pluginList"
                :height="maxHeight"
                :max-height="maxHeight"
                tooltip-effect="dark"
                style="width: 100%"
                highlight-current-row
                header-row-class-name="header-row"
                @select="(selection, row) => handleRowClick(row)"
                @row-click="handleRowClick"
            >
                <el-table-column
                    type="selection"
                   
                >
                </el-table-column>
                <el-table-column
                    prop="productBasicInfo.id"
                    label="服务编码"
                    width="180"
                >
                </el-table-column>
                <el-table-column
                    label="服务代码"
                    width="180"
                >
                    <template slot-scope="scope">
                        {{scope.row.productBasicInfo.serviceCode || "--"}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="productLineName"
                    label="产品线"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="typeName"
                    label="服务类型"
                    :show-overflow-tooltip="true"
                >

                </el-table-column>
                <el-table-column
                    prop="productBasicInfo.serviceName"
                    label="服务名称"
                    :show-overflow-tooltip="true"
                >

                </el-table-column>

                <el-table-column label="是否需要配置">
                    <template slot-scope="scope">
                        {{scope.row.productBasicInfo.needConfig == 1 ? "是":"否"}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="productBasicInfo.description"
                    label="服务备注信息"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <!-- <el-table-column label="详情">
                    <template slot-scope="scope">
                        <span
                            class="table-detail cursor-pointer"
                            @click.stop="showPluginDetail(scope.row)"
                        >详情</span>
                    </template>
                </el-table-column> -->

                <el-table-column
                    prop="productBasicInfo.createDate"
                    label="创建时间"
                    width="180"
                >
                </el-table-column>

            </el-table>
            <el-pagination
                :current-page="pageNum"
                :page-sizes="pageSizes"
                :page-size.sync="pageSize"
                layout="->, total, sizes, prev, pager, next, jumper"
                :total="totalNum"
                @size-change="size => pageSize = size"
                @current-change="num => pageNum = num"
            >
            </el-pagination>

        </div>
        <DetailDialog
            v-if="isShowDetailDialog"
            :detailPlugin="detailPlugin"
            @close="isShowDetailDialog=false"
        />
        <ModifyDialog
            v-if="isShowModifyDialog"
            :pluginData="modifyPlugin"
            @confirm="savePluginSucc"
            @close="isShowModifyDialog=false"
        />
        <CategoryDialog
            v-if="isShowCategory"
            :isShowCancelBtn="false"
            @confirm="showCategory(false)"
            @close="showCategory(false)"
        />
    </div>
</template>

<script>
import AppDialog from "@/components/AppCommon/AppDialog";
import AppStatus from "@/components/AppCommon/AppStatus";
import DetailDialog from "./components/detailDialog";
import ModifyDialog from "./components/modifyDialog";
import CategoryDialog from "./components/categoryDialog";
import { dateFormat, deepCopy, totalPageSize, totalPageSizes } from "@/utils/tool";
export default {
    name: "plugin",
    components: {
        AppDialog,
        AppStatus,
        DetailDialog,
        ModifyDialog,
        CategoryDialog
    },
    computed: {},
    data: () => ({
        dateFormat: dateFormat,
        pluginList: [],
        checkedPlugin: {},
        modifyPlugin: null,
        detailPlugin: {},
        isShowDetailDialog: false,
        isShowModifyDialog: false,
        pageSize: totalPageSize,
        pageNum: 1,
        totalNum: 0,
        pageSizes: totalPageSizes, //下拉动态设置当前页数

        //**************************************************************服务分类配置 */
        isShowCategory: false,
        maxHeight: 0
    }),
    created() {
        this.getTableMaxHeight();
        window.onresize = () => {
            this.getTableMaxHeight();
        };
        this.getPluginList();
    },
    mounted() {},
    watch: {
        pageSize() {
            this.pluginList = [];
            if (this.pageNum == 1) {
                this.getPluginList();
            } else {
                this.pageNum = 1;
            }
        },
        pageNum() {
            this.pluginList = [];
            this.getPluginList();
        }
    },
    methods: {
        // 获取表格高度
        getTableMaxHeight() {
            let height = window.innerHeight;
            this.maxHeight = height - 150;
        },
        // 获取产品列表
        getPluginList() {
            this.api
                .getPluginList(
                    {
                        params: {
                            pageSize: this.pageSize,
                            pageNum: this.pageNum
                        }
                    },
                    {
                        method: "get",
                        customRequest: true,
                        loading: true
                    }
                )
                .then(res => {
                    let data = res.data;
                    this.totalNum = Number(data.total);
                    this.pluginList = data.list || [];
                    // 恢复选中插件
                    if (this.checkedPlugin && this.checkedPlugin.productBasicInfo && this.checkedPlugin.productBasicInfo.id) {
                        this.$nextTick(() => {
                            let row = this.pluginList.find(item => item.productBasicInfo.id === this.checkedPlugin.productBasicInfo.id);
                            this.checkedPlugin = {};
                            this.handleRowClick(row)
                        });
                    }
                })
                .catch(err => {
                    this.pluginList = [];
                });
        },

        // 可取消选中的单选
        handleRowClick(row) {
            this.$refs.singleCheck.clearSelection();
            if (
                this.checkedPlugin &&
                this.checkedPlugin.productBasicInfo &&
                this.checkedPlugin.productBasicInfo.id ===
                    row.productBasicInfo.id
            ) {
                this.checkedPlugin = {};
                this.$refs.singleCheck.setCurrentRow();
            } else {
                this.checkedPlugin = row;
                this.$refs.singleCheck.setCurrentRow(row);
                this.$refs.singleCheck.toggleRowSelection(row);
            }
        },
        // 增加
        showPluginAdd() {
            this.modifyPlugin = null;
            this.isShowModifyDialog = true;
        },
        // 修改
        showPluginModify() {
            let { checkedPlugin } = this;
            if (
                !(
                    checkedPlugin &&
                    checkedPlugin.productBasicInfo &&
                    checkedPlugin.productBasicInfo.id
                )
            ) {
                this.$message({
                    showClose: true,
                    message: "请先选择要修改的服务",
                    type: "warning"
                });
                return;
            }
            this.modifyPlugin = deepCopy(this.checkedPlugin);
            this.isShowModifyDialog = true;
        },
        // 查看
        showPluginDetail(data) {
            this.isShowDetailDialog = true;
            this.detailPlugin = data;
        },
        deleteConfirm() {
            let { productBasicInfo } = this.checkedPlugin;

            if (!(productBasicInfo && productBasicInfo.id)) {
                this.$message({
                    showClose: true,
                    message: "请先选择要删除的服务",
                    type: "warning"
                });
                return;
            }
            //

            this.$confirm(
                `确定要删除服务 ${productBasicInfo.serviceName} 吗？`,
                "",
                {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消"
                }
            )
                .then(() => {
                    this.deletePlugin();
                })
                .catch(() => {});
        },
        // 删除
        deletePlugin() {
            let { productBasicInfo } = this.checkedPlugin;
            this.api
                .deletePlugin([productBasicInfo.id], { customMessage: true })
                .then(res => {
                    if (res.code == 200) {
                        this.$message({
                            showClose: true,
                            message: "删除成功",
                            type: "success"
                        });
                        this.checkedPlugin = {};
                        this.getPluginList();
                    } else {
                        this.$message({
                            showClose: true,
                            message: "删除失败",
                            type: "error"
                        });
                    }
                })
                .catch(err => {
                    this.$message({
                        showClose: true,
                        message: "删除失败",
                        type: "error"
                    });
                });
        },
        showCategory(val) {
            this.isShowCategory = val;
        },
        // 产品生产，添加产品
        savePluginSucc() {
            this.getPluginList();
            this.isShowModifyDialog = false;
        }
    }
};
</script>

